<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira%20Code" />
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script>
  $(function () {
    if ($("#cnblogs_post_body").hasClass("cnblogs-markdown")) {
      if ($("#post-date")[0]) {
        var pres = $("pre");
        if (pres.length) {
          pres.each(function () {
            var t = $(this)
              .children("code")
              .text();
            var btn = $(
              '<button class="copy">复制</button>'
            ).attr(
              "data-clipboard-text",
              t
            );
            $(this).prepend(btn);
            var c = new ClipboardJS(btn[0]);
            c.on("success", function () {
              btn.addClass("copyed").text("复制成功");
            });
            c.on("error", function () {
              btn.text("复制失败");
            });
            btn.mouseleave(function () {
              btn.text("复制").removeClass("copyed");
            });
          });
        }
      }
    }
  });
</script>
<style>
  .copy {
    color: #409eff;
    background: #ecf5ff;
    padding: 8px 10px;
    text-align: center;
    font-size: 14px;
    border: none;
    transition: all 0.2s ease;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    text-decoration: none;
    margin-bottom: 5px;
    font-size: 12px;
  }

  .copy:hover {
    background: #409eff;
    color: #fff;
  }
</style>